<template>
  <el-container>
    <el-main>
      <el-row type="flex" justify="space-between" :gutter="2">
        <el-col :span="12">
          <el-card class="box-card3" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>用户查看</b></span>
            </div>
            <el-table
              @row-click="chooseUser"
              :data="tableData2"
              highlight-current-row
              border
              max-height="800"
              style="width: 35vw; border-radius: 10px"
              :row-class-name="tableRowClassName"
            >
              <el-table-column type="index" width="40"> </el-table-column>
              <el-table-column prop="id" label="ID" width="80">
              </el-table-column>
              <el-table-column prop="username" label="username" width="80">
              </el-table-column>
              <el-table-column prop="mail" label="mail" width="80">
              </el-table-column>
              <el-table-column
                prop="phonenumber"
                label="phonenumber"
                width="80"
              >
              </el-table-column>
              <el-table-column prop="status" label="status" width="80">
              </el-table-column>

              <el-table-column fixed="right">
                <template slot="header" slot-scope="scope">
                  <el-row type="flex" justify="center">
                    <el-input
                      style="margin-top: 11px; width: 130px !important"
                      :value="`用户id:${user_choosed}`"
                      size="small"
                      placeholder="未选择用户"
                      disabled
                    />
                  </el-row>
                  <el-row type="flex" justify="center">
                    <el-button
                      style="margin-top: 10px"
                      size="small"
                      type="primary"
                      icon="el-icon-search"
                      @click="search"
                      >搜索</el-button
                    >
                  </el-row>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="box-card4" shadow="always">
            <div slot="header" class="clearfix">
              <span style="float: left"><b>商品推荐</b></span>
            </div>
            <el-table
              :data="tableData"
              border
              max-height="800"
              style="width: 100%; border-radius: 10px"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="date" label="日期" width="180">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="180">
              </el-table-column>
              <el-table-column prop="address" label="地址"> </el-table-column>
            </el-table>
          </el-card>
          <el-card class="box-card4" shadow="always">
            <div class="grid" id="grid">
            <Card
              v-for="item in 6"
              :key="item"
              :img="require(`../../assets/img/`+item+`.jpg`)"
              link=""
            ></Card>
          </div>
          </el-card>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>
import Card from "../../components/Card-img.vue";
export default {
  components: {
    Card,
  },
  data() {
    return {
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
      ],
      tableData2: [
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
        {
          id: "00002",
          username: "王小虎",
          mail: "上海市普陀区金沙江路 1518 弄",
          phonenumber: "1010101010",
          status: "已婚",
        },
      ],
      user_choosed: "",
    };
  },
  mounted() {
    this.show();
  },

  methods: {
    chooseUser(row) {
      console.log(row);
      this.user_choosed = row.id;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
  },
};
</script>

<style scoped>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
.el-main {
  margin-left: -30px;
}

.el-row {
  margin-bottom: 20px;
}
.box-card3 {
  width: 35vw;
  border-radius: 20px;
  /* margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
}
.box-card4 {
  width: 42vw;
  border-radius: 20px;
  /* margin-top: 15px;
  margin-bottom: 15px; */
  margin: 15px auto;
}

#grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 150px);
  grid-column-gap: 30px;
  grid-row-gap: 30px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 700px;
}
#grid .card {
  background-color: #ccc;
  width: 150px;
  height: 150px;
  transition: all 0.1s ease;
  border-radius: 3px;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0);
  overflow: hidden;
  cursor: pointer;
  /* border: 2px solid red; */
}
#grid .card:hover {
  -webkit-transform: scale(2);
  transform: scale(2);
  z-index: 2;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}
#grid .card:hover img {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
}
#grid .card .reflection {
  /* position: absolute; */
  width: 100px;
  height: 100px;
  z-index: 2;
  left: 0;
  top: 0;
  transition: all 0.1s ease;
  opacity: 0;
  mix-blend-mode: soft-light;
}
</style>